<template>
  <div class="shop">
    <div class="header">
      <ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;">
						<img class="mui-media-object mui-pull-left" src="../assets/images/icon1.png">
						<div class="mui-media-body">
							Dior 专营店
							<p class="mui-ellipsis">来自日本 <span>1.2万关注</span> </p>
						</div>
            <p class="getCoupon">领券</p>
            <button class="follow"> + 关注</button>
					</a>
				</li>
			</ul>
    </div>
    <div class="content">
      <div class="tit">
        店铺推荐
        <span>お店のお勧め</span>
      </div>
      <ul class="listTop">
        <li v-for="(item,index) in list2" :key="index">
          <div class="top">
            <img src="../assets/images/icon3.png" alt="">
          </div>
          <div class="bot">
            <div class="gq">
              <p></p>
            </div>
            <p class="proInfo" style="height:32px; overflow:hidden;">SVELTY 分解糖活孝母 56粒</p>
            <div class="price">
              <span>￥65</span>
              <div class="addShop"></div>
            </div>
          </div>
        </li>
      </ul>
      <ul class="list" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
        <li v-for="(item,index) in list" :key="index">
          <div class="top">
            <img src="../assets/images/icon3.png" alt="">
          </div>
          <div class="bot">
            <div class="gq">
              <p></p>
            </div>
            <p class="proInfo">BIORE 碧柔 水活防晒霜SPF50+PA++ 50g</p>
            <div class="price">
              <span>￥65</span>
              <div class="addShop"></div>
            </div>
          </div>
        </li>
      </ul>
      <div class="load">
        <mt-spinner type="double-bounce"></mt-spinner>
        <span style="float:left;">正在加载</span>
      </div>
    </div>
    
  </div>
</template>

<script>
export default {

  data () {
    return {
      list:[1,2,3,4,5,6,6,6],
      list2:[1,2,3],
      loading:false
    }
  },

  methods: {
    loadMore() {
      this.loading = true;
      setTimeout(() => {
        let last = this.list[this.list.length - 1];
        for (let i = 1; i <= 10; i++) {
          this.list.push(last + i);
        }
        this.loading = false;
      }, 500);
    }
  },

  created () {
  }
}
</script>

<style lang='less' scoped>
.shop{
  margin: -5px -20px;
  .header{
    width:100%;
    height:200px;
    background: url('../assets/images/bj.jpg');
    background-size:cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    .mui-table-view{
      width:90%;
      position: absolute;
      bottom:20px;
      left:5%;
      overflow: hidden;
      background: #FFFFFF;
      border: 0 solid #E7E7E7;
      border-radius: 15px;
      .mui-table-view-cell{
        padding: 21px 15px;
      }
      img{
        width:38px;
        height:38px;
      }
      .mui-media-body{
        font-size: 12px;
        color: #333333;
        .mui-ellipsis{
          font-size: 12px;
          color: #999;
          span{
            margin-left: 8px;
          }
        }
      }
      .getCoupon{
        position: absolute;
        right:30px;
        top:10px;
        font-size: 12px;
        color: #333333;
      }
      .follow{
        
        background: #FDDF00;
        border-radius: 100px;
        font-size: 12px;
        text-align: center;
        border: none;
        box-shadow: none;
        font-weight: 800;
        padding: 5px 13px;
        position: absolute;
        bottom:9px;
        right:20px;
      }
    }
  }

  .content{
    padding:5px 20px;
    
    .list,.listTop{
      width:100%;
      list-style: none;
      padding: 0;
      display: flex;
      justify-content: space-between;
      flex-wrap:wrap;
      li{
        width:47%;
        border: 1px solid #E7E7E7;
        border-radius: 10px;
        margin-bottom:10px;
        .top{
          width:100%;
          height:120px;
          min-height: 120px;
          background: #F9F9FB;
          text-align: center;
          img{
            height:80px;
            margin: 19px;
          }
        }
        .bot{
          font-size: 12px;
          color: #333333;
          padding: 16px 13px;
          .gq{
            width:14px;
            height:10px;
            border: 1px solid #F2F2F2;
            p{
              width:4px;
              height:4px;
              margin: 2.5px 4px;
              background: red;
              border-radius:2px;
            }
          }
          .proInfo{
            color: #333333;
            font-size: 12px;
            line-height: 16px;
            margin: 4px 0;
          }
          .price{
            display: flex;
            justify-content: space-between;
            margin: 6px 0px 0px 0px;
            span{
              font-size: 14px;
              color: #E4007B;
            }
            .addShop{
              width:26px;
              height:21px;
              background: url("../assets/images/icon1.png");
              background-size:26px 21px;
            }
          }
        }
        
      }
    }
    .listTop{
      li{
        
        width:32%;
        margin-bottom: 0;
        .top{
          height:70px;
          
          min-height: 70px;
          img{
            width:80%;
            max-height:50px;
            margin: 8px auto;
          }
        }
        .bot{
          padding: 8px 13px;
        }
      }
    }
    .load{
      display: flex;
      justify-content: center;
      span{
        font-size: 14px;
        line-height: 33px;
        display: inline-block;
        margin-left: 10px;
        color:#666;
      }
    }
  }
}
</style>
